<template>
  <div class="content">
    <div class="banner px-30 mt-10" @click="gotoMarketReport">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../assets/images/banner.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="select">
      <GaoCascader ref="gaoCascader" @confirm="areaConfirm"></GaoCascader>
    </div>
    <div class="tabs_box">
      <!-- 作物种类tabs -->
      <van-tabs @click="tabClick">
        <van-tab v-for="item in crop" :title="item.dictLabel"> </van-tab>
      </van-tabs>
    </div>

    <div class="search box-border">
      <div class="name">
        <van-field
          v-model="search_data.varietyname"
          center
          clearable
          placeholder="请输入农产品名称"
          class=""
        >
          <template #button>
            <van-button icon="search" type="info" @click="search">
              搜索
            </van-button>
          </template>
        </van-field>
      </div>
      <!-- 选择日期 -->
      <div class="calendar_box mt-30 w-full h-full">
        <gao-calendar
          @confirm="calendarConfirm"
          ref="gaoCalendar"
        ></gao-calendar>
      </div>
    </div>
    <div class="list_box flex flex-col">
      <div class="title_box flex justify-between flex-items-center">
        <div class="title"></div>
        <div class="clear flex flex-items-center">
          <van-button icon="delete-o" type="info" @click="reset">
            重置搜索
          </van-button>
        </div>
      </div>
      <div class="header flex justify-between flex-items-center">
        <div class="head_item cell cell1">商品信息</div>
        <div class="head_item cell cell2">批发市场</div>
        <div class="head_item cell cell3">价格</div>
      </div>
      <div class="table_body flex-grow-1">
        <!-- 加载组件 -->
        <div
          class="loading_box flex justify-center flex-items-center"
          v-if="initLoading"
        >
          <van-loading type="spinner" size="54" color="#57AB6B" />
        </div>

        <!-- 无数据组件 -->
        <no-data v-if="tableData.length == 0 && !initLoading"></no-data>
        <div class="list" v-else>
          <van-list
            :immediate-check="false"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getMarketPriceList"
          >
            <div
              class="list_row flex justify-between flex-items-center"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div class="cell cell1 table_item">
                <span
                  >{{ item.varietyname }} <br />
                  {{ item.instoragetime }}</span
                >
              </div>
              <div class="cell cell2 table_item">{{ item.marketname }}</div>
              <div class="cell cell3 table_item">
                {{ item.middleprice }}{{ item.meteringunit }}
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import testApi from "@/api/test";
import GaoCascader from "@/components/GaoCascader.vue";
import GaoCalendar from "@/components/GaoCalendar.vue";
import NoData from "@/components/no-data.vue";
import { Toast } from "vant";
import { getCropList, getMarketPriceList } from "@/api/api";
export default {
  computed: {
    ...mapState("store_modular", ["name"]),
  },
  data() {
    return {
      pageNum: "1",
      pageSize: "7",
      initLoading: true,
      loading: false,
      finished: false,
      totalData: "",
      num: 0,
      list: [],
      search_data: {
        varietyname: "",
        marketcode: "",
        provincecode: "",
        unittype: "",
        startTime: "",
        endTime: "",
      },
      cropName: "",
      // 作物种类
      crop: [
        {
          name: "全部种类",
        },
        {
          name: "蔬菜类",
        },
        {
          name: "水果类",
        },
        {
          name: "肉禽蛋类",
        },
        {
          name: "粮油类",
        },
      ],
      tableData: [],
    };
  },
  components: {
    GaoCascader,
    GaoCalendar,
    NoData,
  },
  async created() {
    this.getCropList();
    // await this.getMarketPriceList();
  },

  methods: {
    ...mapMutations("store_modular", ["operation"]),
    calendarConfirm(e) {
      if (e.result == false) {
        Toast.fail(e.msg);
      } else {
        this.search_data.startTime = e.startTime;
        this.search_data.endTime = e.endTime;

        this.pageNum = 1;
        this.tableData = [];
        this.finished = false;
        this.loading = false;
        this.initLoading = true;
        this.getMarketPriceList();
      }
    },
    reset() {
      this.search_data.varietyname = "";
      this.$refs.gaoCalendar.reset();
    },
    async getCropList() {
      let params = {
        pageSize: "1000",
        pageNum: "1",
      };
      let { data } = await getCropList(params);
      if (data.code == 200) {
        this.crop = data.rows;
      }
    },
    gotoMarketReport() {
      this.$router.push({ path: "/market-report-list" });
    },
    async getMarketPriceList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.search_data,
      };
      let { data } = await getMarketPriceList(params);
      if (data.code == 200) {
        setTimeout(() => {
          this.tableData = this.tableData.concat(data.rows);
          this.pageNum++;
          this.totalData = data.total;
          this.loading = false;
          if (this.tableData.length >= this.totalData) {
            this.finished = true;
          }
          this.initLoading = false;
        }, 1000);
      }
    },
    areaConfirm(e) {
      this.pageNum = 1;
      this.finished = false;
      this.loading = false;
      this.tableData = [];
      this.initLoading = true;
      this.search_data.marketcode = e.marketCode;
      this.search_data.provincecode = e.proviceCode;
      this.getMarketPriceList();
    },
    search() {
      this.pageNum = 1;
      this.tableData = [];
      this.finished = false;
      this.loading = false;
      this.initLoading = true;
      this.getMarketPriceList();
    },
    tabClick(e) {
      this.search_data.unittype = this.crop[e].dictLabel;
      this.pageNum = 1;
      this.tableData = [];
      this.finished = false;
      this.loading = false;
      this.initLoading = true;
      this.getMarketPriceList();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 20px;
  img {
    width: 100%;
  }
}

.van-swipe {
  width: 100%;
  height: 100% !important;
}

.content {
  .banner {
    width: 690px;
    height: 300px;
  }

  .select {
    margin-top: 26px;
  }

  .tabs_box {
    margin-top: 50px;

    // padding: 0 30px;
    ::v-deep .van-tabs {
      .van-tabs__wrap {
        height: 52px !important;

        .van-tabs__nav {
          // position: relative;
          width: 100%;
          border-bottom: 1px solid #e5e5e5;
          // &::after{
          //   content: '';
          //   width: 80px;
          //   height: 1px;
          //   bottom: 0;
          //   left: 50%;
          //   transform: translateX(-50%);
          //   background-color: #E5E5E5;
          // }
        }

        .van-tabs__nav--line {
          padding-bottom: 0 !important;
        }
      }

      .van-tab {
        margin-bottom: 0;

        .van-tab__text {
          line-height: 36px;
          height: 100%;
          font-weight: 400;
          font-size: 30px;
          color: #666666;
        }

        margin-bottom: 16px;
      }

      .van-tab.van-tab--active {
        .van-tab__text {
          font-weight: bold;
          font-size: 34px;
          color: #45b46d;
        }
      }

      .van-tabs__line {
        background-color: rgba(70, 190, 120, 1);
        width: 40px;
        height: 8px;
        box-sizing: border-box;
        bottom: 0;
        // padding-top: 18px;
      }
    }
  }

  .search {
    padding: 0 30px;
    margin-top: 30px;

    .calendar_box {
    }

    .name {
      ::v-deep .van-cell {
        width: 690px;
        height: 72px;
        background: #f5f5f5;
        border-radius: 35px 35px 35px 35px;

        .van-cell__value {
          height: 100%;

          .van-field__body {
            height: 100%;
          }
        }

        input {
          height: 100%;
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 28px;
          margin-left: 30px;
        }

        input::placeholder {
          font-weight: 400;
          font-size: 28px;
          color: #999999;
          vertical-align: middle;
        }
      }

      ::v-deep .van-field__button {
        width: 140px;
        height: 60px;

        button {
          width: 100%;
          height: 100%;
          border-radius: 99px 99px 99px 99px;
          background: linear-gradient(270deg, #46be78 0%, #45b46d 100%);

          .van-button__content {
            font-weight: 400;
            font-size: 28px;
            color: #ffffff;
          }
        }
      }
    }
  }

  .list_box {
    margin: 50px auto;
    width: 690px;
    min-height: 695px;
    background-image: url(../assets/images/list_bg.png);
    background-repeat: no-repeat;
    background-size: contain;

    .header {
      width: 650px;
      height: 64px;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      margin: 22px auto 0;
      font-weight: bold;
      font-size: 26px;
      color: #333333;

      .head_item {
        text-align: center;
      }
    }

    .table_body {
      width: 650px;
      height: 0;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      margin: 10px auto;
      // overflow: hidden;
      .loading_box {
        width: 100%;
        height: 400px;
      }
      .list {
        .list_row {
          font-weight: bold;
          font-size: 24px;
          color: #333333;
          height: 120px;
          width: 100%;
          &:nth-child(1) {
            border-radius: 20px 20px 0px 0px;
          }
          &:nth-child(n) {
            background: #ffffff;
          }
          &:nth-child(2n) {
            background: #e9f2ee;
          }
          .cell3 {
            color: #45b46d;
          }
        }
      }
    }

    .cell {
      width: 0;
      // text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        text-align: left !important;
      }
    }
    .cell1 {
      flex-grow: 3;
    }
    .cell2 {
      flex-grow: 5;
    }
    .cell3 {
      flex-grow: 3;
    }

    .title_box {
      padding: 36px 20px 0 40px;

      .title {
        width: 154px;
        height: 43px;
        @include bkgMaxSize("../assets/images/list_title.png");
      }

      .clear {
        ::v-deep .van-button {
          width: 168px;
          height: 46px;
          border-radius: 99px 99px 99px 99px;
          background: #c9f3da;
          border: none;

          .van-button__content {
            font-weight: 400;
            font-size: 24px;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
